import { Pagination as AntdPagination } from 'antd';
import React from 'react';
import { NextPageIcon, PrevPageIcon } from '../Svg';

import type { PaginationProps } from 'antd';
export type { PaginationConfig, PaginationProps } from 'antd/lib/pagination';

export type ItemRenderType =
  | 'page'
  | 'prev'
  | 'next'
  | 'jump-prev'
  | 'jump-next';
export type Props = PaginationProps;

function Pagination(props: Props) {
  const config: {
    [key in ItemRenderType]?: any;
  } = {
    prev: <PrevPageIcon />,
    next: <NextPageIcon />,
    'jump-next': <div>...</div>,
    'jump-prev': <div>...</div>,
  };
  const itemRender: PaginationProps['itemRender'] = (
    _,
    type,
    originalElement,
  ) => {
    const types = Object.keys(config) as ItemRenderType[];
    if (types.includes(type)) return config[type];
    return originalElement;
  };
  const paginationProps = {
    itemRender,
    ...props,
  };
  return <AntdPagination {...paginationProps} />;
}

export default Pagination;
